<template>
  <div id="app">
    <h1>预定订单管理</h1>
    <!-- 预定订单添加表单 -->
    <form @submit.prevent="addReservation">
      <label for="customerName">客户姓名：</label>
      <input
          type="text"
          id="customerName"
          v-model="newReservation.customerName"
          placeholder="输入客户姓名"
          required
      />
      <label for="roomNumber">房间号：</label>
      <input
          type="text"
          id="roomNumber"
          v-model="newReservation.roomNumber"
          placeholder="输入房间号"
          required
      />
      <label for="checkInDate">入住日期：</label>
      <input
          type="date"
          id="checkInDate"
          v-model="newReservation.checkInDate"
          required
      />
      <label for="checkOutDate">退房日期：</label>
      <input
          type="date"
          id="checkOutDate"
          v-model="newReservation.checkOutDate"
          required
      />
      <button type="submit">添加预定</button>
    </form>
    <!-- 预定订单列表展示 -->
    <table>
      <thead>
      <tr>
        <th>客户姓名</th>
        <th>房间号</th>
        <th>入住日期</th>
        <th>退房日期</th>
        <th>订单状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(reservation, index) in reservations" :key="index">
        <td>{{ reservation.customerName }}</td>
        <td>{{ reservation.roomNumber }}</td>
        <td>{{ reservation.checkInDate }}</td>
        <td>{{ reservation.checkOutDate }}</td>
        <td>{{ reservation.status }}</td>
        <td>
          <button @click="deleteReservation(index)">删除</button>
          <button @click="confirmReservation(index)" :disabled="reservation.status === '已确认'">确认</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义预定订单列表的响应式数据
const reservations = ref([]);
// 定义新预定订单信息的响应式数据
const newReservation = ref({
  customerName: '',
  roomNumber: '',
  checkInDate: '',
  checkOutDate: '',
  status: '待确认'
});

// 添加预定订单的方法
const addReservation = () => {
  if (
      newReservation.value.customerName.trim()!== '' &&
      newReservation.value.roomNumber.trim()!== '' &&
      newReservation.value.checkInDate!== '' &&
      newReservation.value.checkOutDate!== ''
  ) {
    reservations.value.push({...newReservation.value });
    // 清空表单
    newReservation.value = {
      customerName: '',
      roomNumber: '',
      checkInDate: '',
      checkOutDate: '',
      status: '待确认'
    };
  }
};

// 删除预定订单的方法
const deleteReservation = (index) => {
  reservations.value.splice(index, 1);
};

// 确认预定订单的方法
const confirmReservation = (index) => {
  reservations.value[index].status = '已确认';
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

form {
  margin-bottom: 20px;
}

label {
  margin-right: 5px;
}

input {
  padding: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
}

button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 5px;
}

button:hover {
  background-color: #357a5e;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>